<template>
	<view class="wrap">
		<view class="dev-area">
			<!-- 温度 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">温度</view>
					<image src="~@/static/temp.png" mode="" class="dev-logo"></image>

				</view>
				<view class="dev-data">{{temp}}℃</view>
			</view>
			<!-- 湿度 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">湿度</view>
					<image src="~@/static/humi.png" mode="" class="dev-logo"></image>

				</view>
				<view class="dev-data">{{humi}}%</view>
			</view>
			<!-- 台灯 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">台灯 </view>
					<image src="~@/static/led.png" mode="" class="dev-logo"></image>

				</view>
				<switch :checked="led" @change="onLedSwitch" color="green" />
			</view>
			<!-- 风扇 -->
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">风扇 </view>
					<image src="~@/static/fan.png" mode="" class="dev-logo"></image>

				</view>
				<switch :checked="Led_Switch" @change="onFanSwitch" color="green" />
			</view>
			
			
			
			<view class="dev-dang">
				<view class="">
					<view class="dev-name">档位 </view>
					<image src="~@/static/fan.png" mode="" class="dev-logo"></image>
			
				</view>
				<uni-number-box @change="fanchangeValue"  :min="0" :max="3" :value="Luminance"
				:disabled="Led_Switch ?false:true" />
				
				<!-- <switch :checked="Led_Switch" @change="onFanSwitch" color="green" /> -->
			</view>
			
			
		</view>
	</view>
	
	
	
	
	
</template>

<script>
	const {
		createCommonToken
	} = require('@/key.js')
	export default {
		data() {
			return {
				temp: '',
				humi: '',
				Luminance: 0,
				led: true,
				Led_Switch: true,
				token: '',
				switch_flag: 0, // 标记开关操作
				switch_change :0,
				switch_Fan: 0,
			}
		},
		onLoad() {
			const params = {
				// 用户Accesskey
				author_key: '4vHIH6qN1Imb8YYs1yFUIs3KaM+UxQkCeL4iW1h7YFj+PylBxp8nDb0oymyXObkh',
				version: '2022-05-01',
				//用户ID
				user_id: '418146',
			}
			this.token = createCommonToken(params);
		},
		onShow() {
			this.fetchDevData();
			setInterval(() => {
				this.fetchDevData();
			}, 1000) // 定时获取数据3s
		},
		methods: {
			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property', //仅为示例，并非真实接口地址。
					method: 'GET',
					data: {
						// 产品ID
						product_id: 'MpE4D1cUu3',
						// 产品名
						device_name: 'd1'
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: (res) => {
						console.log(res.data);
						// 数据显示
						
						this.temp = res.data.data[4].value;
						this.humi = res.data.data[2].value;
						if (this.switch_flag == 1) this.switch_flag = 0;
						else this.led = res.data.data[3].value === 'true';
						//this.led = res.data.data[1].value === 'true';

						if (this.switch_Fan == 1) this.switch_Fan = 0;
						else this.Led_Switch = res.data.data[0].value === 'true';
						
						
						if(this.switch_change == 1) this.switch_change = 0;
						else this.Luminance = parseInt(res.data.data[1].value)
						
						// this.Luminance = res.data.data[1].value;
						
						//"Led_Switch"
					}
				});

			},
			// LED操作
			onLedSwitch(event) {
				console.log(event.detail.value);

				this.switch_flag = 1; // 标记开关动作
				let value = event.detail.value;
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						// 产品ID
						product_id: 'MpE4D1cUu3',
						// 产品名
						device_name: 'd1',
						params: {
							"led": value
						}
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: () => {
						console.log("LED " + (value ? 'ON' : 'OFF') + '!');
					}
				});

			},
			// 风扇操作
			onFanSwitch(event) {
				console.log(event.detail.value);

				this.switch_Fan = 1; // 标记开关动作
				let value = event.detail.value;
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						// 产品ID
						product_id: 'MpE4D1cUu3',
						// 产品名
						device_name: 'd1',
						params: {
							"Led_Switch": value
						}
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: () => {
						console.log("Fan " + (value ? 'ON' : 'OFF') + '!');
					}
				});

			},
			// 档位设置
			fanchangeValue(event)  {
				console.log(event);
					this.switch_change = 1;
				//this.switch_Fan = 1; // 标记开关动作
				let value = event;
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/set-device-property', //仅为示例，并非真实接口地址。
					method: 'POST',
					data: {
						// 产品ID
						product_id: 'MpE4D1cUu3',
						// 产品名
						device_name: 'd1',
						params: {
							"Luminance": value
						}
					},
					header: {
						'authorization': this.token //自定义请求头信息
					},
					success: () => {
						console.log("Luminance " + (value) + '!');
					}
				});

			}



		}
	}
</script>

<style>
	.wrap {
		padding: 30rpx;
	}

	.dev-area {
		display: flex;
		/* flex-direction: column; */
		/* align-items: center; */
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dev-cart {
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	.dev-logo {

		width: 70rpx;
		height: 70rpx;
		margin-top: 12rpx;
	}

	.dev-name {
		font-size: 20rpx;
		color: #6d6d6d;
		text-align: center;
	}

	.dev-data {
		font-size: 50rpx;
		color: #6d6d6d;

	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.dev-dang {
		height: 150rpx;
		width: 800rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}




	.content {
		display: flex;
		flex-direction: column;

	}
</style>